<template>
    <div class="food" >
       <el-divider content-position="left"><h4>食材:</h4></el-divider>
        
        <div   v-for="food in foods" :key="food.menuId">
          <li>{{food.foodName}}</li>
          <li>{{food.foodSum}}</li>
        </div>
        
    </div>
</template>>
<script>
export default {
 data(){
     return{ 
         queryId:-1,
        
         foods:[]
        }
       
    },

     created() {
       this.queryId=this.$route.params.id
     
       this.$axios
      .get("/api/createMenu/getfood",{ params: { menuId: this.queryId}})
      .then((res) => {
        console.log("res:", res);
        this.foods = res.data.data;
      })
      .catch((err) => {
        console.log("err:", err);
      });
  },
 
}

</script>
<style lang="scss" scoped>
@import "../../css/menu/menuchild.css";
</style>